@import "@/common/constants/StyleConst.scss";

.AttachmentGroup-Container {
  .images {
    text-align: left;

    &>div {
      flex-wrap: wrap;
    }

    .image-wrap {
      width: 63.15px;
      height: 63.15px;
      overflow: hidden;
      display: flex;
      flex: unset;
      flex-grow: 1;
      align-items: center;

      &:not(.detailed-attachment-wrap) {
        .attachment {
          width: 100%;
          height: 100%;

          &>.col {
            width: 100%;
            height: 100%;
            flex: unset;
          }
        }
      }

      .img-wrap {
        width: 100%;
        height: 100%;
        position: relative;

        .checkbox {
          margin: unset;
          padding: unset;

          :deep .v-input__slot {
            position: unset;

            .v-input--selection-controls__input {
              // background-color: #ffffff1a;
              margin-right: 0;
              position: absolute;
              z-index: 2;
              right: 0;
              top: 0;

              .v-icon {
                color: #fff;

                &::before {
                  font-size: 18px;
                }
              }
            }
          }
        }

        .img-introduction {
          width: 100%;
          height: 20.9px;
          background-color: #556282;
          position: absolute;
          bottom: 0;
          font-size: 8px;
          color: #fff;

          svg {
            width: 100%;
            height: 100%;
            fill: currentColor;

            text {
              font-size: 8px;
            }
          }
        }


        .img-decorate {
          position: absolute;
          top: 0;
          transform: rotate(45deg) translateX(-90%);
          width: 40px;
          height: 40px;
          z-index: 4;

          &.img-decorate-orange {
            background-color: #EB9B31;
          }

          &.img-decorate-blue {
            background-color: $color-theme-navy;
          }
        }


        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

    }

    .detailed-attachment-wrap {
      background-color: $color-theme-lightgrey;
      word-break: break-all;
      width: calc(20% - 8px);
      height: 63.15px;
      flex: unset;

      .attachment {
        height: inherit;

        .img-wrap {
          width: 63.15px;
          height: 63.15px;
        }

        .img-detail {
          height: inherit;
          overflow-y: overlay;
          padding-right: 8px;
        }
      }

    }
  }
}